<!--
 * @Description: 教案审批表
 * @Autor: dyx
 * @Date: 2023-05-30 14:36:16
 * @LastEditTime: 2023-06-02 17:33:25
-->
<template>
  <div class="TISchedule">
    <!-- <div style="padding-right: 7px;">
      <el-button type="primary" style="float:right" @click="exportWord"
        >导出Word</el-button
      >
    </div> -->
    <el-row class="JADP-common-search-box" :gutter="16">
      <el-form @submit.native.prevent>
        <el-col :span="10">
          <el-form-item label="课件名称">
            <el-input
              class="courseware"
              v-model="coursewareName"
              placeholder="请选择课件"
              readonly
              @click.native.stop="coursewareClick"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click.native.stop="coursewareClick"
                >查询</el-button
              >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item>
            <el-button type="primary" style="float:right" @click="exportWord"
              >导出Word</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="mytable" v-if="!loading" v-loading="loading">
      <div class="table_title">教案审批表</div>
      <table>
        <tr>
          <td width="18%">
            授课教师
          </td>
          <td width="26%">
            <input type="text" v-model="dataForm.skjs" style="width:100%" />
          </td>
          <td width="18%">
            培训班名称
          </td>
          <td width="26%">
            <input
              type="text"
              v-model="dataForm.className"
              style="width:100%"
            />
          </td>
        </tr>
        <tr>
          <td>
            课程名称
          </td>
          <td>
            <input type="text" v-model="dataForm.kcmc" style="width:100%" />
          </td>
          <td>
            培训对象
          </td>
          <td>
            <input type="text" v-model="dataForm.pxdx" style="width:100%" />
          </td>
        </tr>
        <tr>
          <td>
            授课方式
          </td>
          <td colspan="3">
            <input type="text" v-model="dataForm.skfs" style="width:100%" />
          </td>
        </tr>
        <tr height="445px">
          <td>
            授课安排总体思路及授课内容简介
          </td>
          <td colspan="3">
            <textarea
              v-model="dataForm.skap"
              style="width:100%; height:440px"
            />
          </td>
        </tr>
        <tr height="145px">
          <td>
            教学负责人意见
          </td>
          <td colspan="3">
            <textarea
              v-model="dataForm.jxfzr"
              style="width:100%; height:10vh"
            />
            <div class="bottom">
              <div class="bomlabel">
                <span> 签字：</span
                ><input type="text" v-model="dataForm.qz" style="width:70%" />
              </div>
              <div style="text-align:right">
                <span
                  >日期：
                  <el-date-picker
                    v-model="rq"
                    type="date"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    style="width:70%"
                  >
                  </el-date-picker>
                </span>
                <!-- <span>
                  <input
                    class="YMDdate"
                    type="text"
                    v-model="dataForm.year"
                    oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                    style="width:10%"
                  />
                  年</span
                >
                <span>
                  <input
                    class="YMDdate"
                    type="text"
                    v-model="dataForm.month"
                    oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                    style="width:5%"
                  />

                  月</span
                >
                <span
                  ><input
                    class="YMDdate"
                    type="text"
                    v-model="dataForm.day"
                    oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                    style="width:5%"
                  />日</span
                > -->
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <Courseware
      v-if="coursewareVisible"
      ref="CoursewareList"
      @currentRow="currentRow"
    />
  </div>
</template>
<script>
import request from "@/utils/request";
import Courseware from "../coursewareList.vue";
export default {
  name: "TISchedule",
  components: {
    Courseware
  },
  data() {
    return {
      loading: true,
      dataForm: {},
      list: [],
      rq: "",
      coursewareName: "",
      coursewareVisible: false,
      classId: ""
    };
  },
  created() {},
  methods: {
    coursewareClick() {
      this.coursewareVisible = true;
      this.$nextTick(() => {
        this.$refs.CoursewareList.initData(false, this.classId);
      });
    },
    currentRow(val) {
      this.coursewareName = val.name;
      this.coursewareVisible = false;
      this.loading = true;

      request({
        url: `/api/class_archives/generateA3?classId=${this.classId}&crmId=${val.crmId}&coursewareId=${val.id}&organizeId=${this.$store.getters.organizeId}`,
        method: "get"
      }).then(res => {
        // return;
        this.dataForm = res.data;
        //  正则匹配去除标签
        this.dataForm.skap =
          this.dataForm.skap && this.dataForm.skap.replace(/<[^>]+>/g, "");
        this.loading = false;
      });
    },
    init(id) {
      this.classId = id;
    },
    exportWord() {
      if (JSON.stringify(this.dataForm) == "{}") {
        this.$message.error("请先选择课件");
        return;
      }
      let rqArr = this.rq.split("-");
      this.dataForm.year = rqArr[0];
      this.dataForm.month = rqArr[1];
      this.dataForm.day = rqArr[2];
      for (let key in this.dataForm) {
        if (Array.isArray(this.dataForm[key])) {
          this.dataForm[key].forEach(item => {
            for (let key2 in item) {
              if (item[key2] == null) {
                item[key2] = "";
              }
            }
          });
        } else if (this.dataForm[key] == null) {
          this.dataForm[key] = "";
        }
      }
      this.dataForm.organizeId=this.$store.getters.organizeId;
      request({
        responseType: "blob",
        url: "/api/class_archives/generateA3Export",
        method: "post",
        data: this.dataForm
      }).then(res => {
        var debug = res;
        if (debug) {
          var a = document.createElement("a");
          a.download = "教案审批表.docx";
          a.style.display = "none";
          var blob = new Blob([debug], { type: "application/x-msdownload" });
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
// 引入公共样式
@import "./TABLESTYLE.scss";
input {
  // border: 1px solid #ccc !important;
}
.courseware {
  ::v-deep .el-input__inner {
    cursor: pointer;
    border: 1px solid #dcdfe6 !important;
  }
}
</style>
